<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
	<title>CSS 2D转换</title>
    <script src="./prefixfree.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		
		.box {
			width: 155px;
			height: 219px;
			margin: 300px auto;
			position: relative;
		}
		
		.box img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			/*
				旋转的终点，默认是在正中间，我们可以修改在左上角

			*/
			transform-origin: right top;
			transition: all 3s;
		}
		
		.box:hover img:nth-child(1) {
			transform: rotate(60deg);
		}
		
		.box:hover img:nth-child(2) {
			transform: rotate(120deg);
		}
		
		.box:hover img:nth-child(3) {
			transform: rotate(180deg);
		}
		
		.box:hover img:nth-child(4) {
			transform: rotate(240deg);
		}
		
		.box:hover img:nth-child(5) {
			transform: rotate(300deg);
		}
		
		.box:hover img:nth-child(6) {
			transform: rotate(360deg);
		}
		/*转换原点不影响translate位移*/
	</style>
</head>

<body>
	<div class="box">
		<img src="./images/pk1.png" alt="">
		<img src="./images/pk1.png" alt="">
		<img src="./images/pk1.png" alt="">
		<img src="./images/pk1.png" alt="">
		<img src="./images/pk1.png" alt="">
		<img src="./images/pk1.png" alt="">
	</div>
</body>

</html>